<template>
  <div class="list-content">
    <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
      <el-form-item v-if="isMuilUnitUser">
        <el-select filterable @change="getStatis()" v-model="formInline.orgIds" placeholder="请选择业主单位">
          <el-option
            v-for="item in orgOptions"
            :key="item.organizationId"
            :label="item.shortName"
            :value="item.organizationId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="formInline.time"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="util.intTimePickerOptions()"
          @change="getStatis()"
          >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button class="form-search-btn" type="primary" @click="getStatis()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row v-loading="loading">
      <el-col :span="24">
        <div class="grid-content">
          <div class="chart-heaad">值班分析</div>  
          <el-row :gutter="20">
            <el-col :md="12"><div id="chart_dutyAnalysis" class="chart-content bg"></div></el-col>
            <el-col :md="12">
              <div class="chart-content bd pd0">
                <div class="chart-content-title">值班人员统计</div>
                <el-table
                  :data="tableData"
                  height="588px"
                  style="width: 100%">
                  <el-table-column
                    prop="watchAccountName"
                    label="姓名">
                  </el-table-column>
                  <el-table-column
                    prop="normal"
                    label="正常">
                  </el-table-column>
                  <el-table-column
                    prop="noWorkNum"
                    label="旷工">
                  </el-table-column>
                  <el-table-column
                    prop="unStartWorkNum"
                    label="上班异常">
                  </el-table-column>
                  <el-table-column
                    prop="unEndWorkNum"
                    label="下班异常">
                  </el-table-column>
                </el-table>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as Dao from '@/api/watch'
import { getOrgList} from '@/api/org'
import util from '@/utils/util'

export default {
  name: 'DutyAnalysis',
  props:['param'],
  data () {
    return {
      freashStaticFlag:0,
      formInline: {
        orgIds:this.$store.state.userinfo.isMuilUnitUser ? this.$store.state.userinfo.organizationIds : this.$store.state.userinfo.org.id,
        time:'',
      },
      util:util,
      tableData: [],//表格数据
      isMuilUnitUser:this.$store.state.userinfo.isMuilUnitUser,
      accountName:this.$store.state.userinfo.accountName,
      orgOptions: [{organizationId: this.$store.state.userinfo.organizationIds,shortName: "全部业主单位"}],
      loading: false,
      colorList:[
                  '#70bbea','#5c90d2','#a58ad4','#f3b75e','#ea4f63',
                   '#16adc4','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                   '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                ]
    }
  },
  created:function() {
    //默认一个月
    let end = new Date();
    let start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
    this.formInline.time = [util.ilinkTimeformat.format(start, 'yyyy-MM-dd ')+'00:00:00', util.ilinkTimeformat.format(end, 'yyyy-MM-dd ')+'23:59:59']
    //绑定下拉框
    if(this.isMuilUnitUser){
      getOrgList({queryType: 0}).then((data)=>{
        this.orgOptions.push.apply(this.orgOptions,data.data);
      })
    }
   this.getStatis()
  },
  methods: {
    getStatis() {
      let that = this
      that.loading = true
      Dao.getOndutyCount({
        orgIds: that.formInline.orgIds,
        startTime: that.formInline.time?(that.formInline.time[0].split(' ')[0]+' 00:00:00'):'',
        endTime: that.formInline.time?(that.formInline.time[1].split(' ')[0]+' 23:59:59'):'',
        watchClassId: -1,
        dutyResult: -1
      }).then((data)=>{
        that.loading = false
        let result = data.data
        let value1= result.normal||0
        let value2= result.noWorkNum||0
        let value3= result.unStartWorkNum||0
        let value4= result.unEndWorkNum||0
        let total = value1+value2+value3+value4 //result.total
        //画图
        let option_echart = {
            title: {
                textStyle: { color: '#2F3444', fontSize: '16' },
                y: 'left',
                left: '15',
                top: '0',
                text: '值班结果分布',
            },
            tooltip: {
                trigger: 'item',
                formatter: /*{a} <br/>*/"{b}: {c} ({d}%)"
            },
            color:['rgba(71, 207, 173, 1)','rgba(255, 179, 45, 1)','rgba(253, 94, 94, 1)'],
            legend: {
                show:true,
                orient:'vertical',
                right:0,
                top:'center',
                itemHeight:16,
                itemWidth:16,
                borderRadius:0,
                textStyle: {
                  padding:5,
                  rich: {
                      a: {
                          fontSize:18,
                          fontWeight:'bold',
                          color: 'rgba(47, 52, 68, 1)',
                      },
                      b: {
                          fontSize:18,
                          color: 'rgba(95, 104, 132, 1)',
                          padding:20
                      },
                  },
                },
                // 在文本中，可以对部分文本采用 rich 中定义样式。
                // 这里需要在文本中使用标记符号：
                // `{styleName|text content text content}` 标记样式名。
                // 注意，换行仍是使用 '\n'。
                formatter: function (name) {
                  if(name == '正常'){
                    return'{a|正常}{b|'+value1+'，'+util.completionDegree(value1,total)+'%}'
                  }else if(name == '旷工'){
                    return'{a|旷工}{b|'+value2+'，'+util.completionDegree(value2,total)+'%}'
                  }else if(name == '上班异常'){
                    return'{a|上班异常}{b|'+value3+'，'+util.completionDegree(value3,total)+'%}'
                  }else{
                    return'{a|下班异常}{b|'+value4+'，'+util.completionDegree(value4,total)+'%}'
                  }
                },
                /*data:[{
                  name: '正常',
                  icon: 'circle'
                },{
                  name: '旷工',
                  icon: 'circle',
                },{
                  name: '上班异常',
                  icon: 'circle',
                },{
                  name: '下班异常',
                  icon: 'circle',
                }]*/
            },
            series: [
                {
                    name:'值班结果分布',
                    type:'pie',
                    hoverOffset:0,
                    hoverAnimation:false,
                    center: ['40%', '50%'],
                    radius: ['30%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                      show:false,
                      emphasis: {
                          show: false,
                      }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:value1, name:'正常',itemStyle:{color:'rgba(71, 207, 173, 1)'}},
                        {value:value2, name:'旷工',itemStyle:{color:'rgba(253, 94, 94, 1)'}},
                        {value:value3, name:'上班异常',itemStyle:{color:'rgba(255, 179, 45, 1)'}},
                        {value:value4, name:'下班异常',itemStyle:{color:'rgba(136, 144, 171, 1)'}},
                    ]
                }
            ]
        };
        that.$echarts.init(document.getElementById('chart_dutyAnalysis')).setOption(option_echart, true);  
        
      })
      Dao.getPersonOndutyCount({
        orgIds: that.formInline.orgIds,
        startTime: that.formInline.time?(that.formInline.time[0].split(' ')[0]+' 00:00:00'):'',
        endTime: that.formInline.time?(that.formInline.time[1].split(' ')[0]+' 23:59:59'):'',
      }).then((data)=>{
        that.loading = false
        that.tableData =data.data
      })
    },
  },
}
</script>
<style lang="scss" scoped>
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    .chart-heaad{
      height:25px;
      line-height:25px;
      font-size:18px;
      font-weight:500;
      color:rgba(68, 107, 222, 1);
      -webkit-text-stroke:1px rgba(68, 107, 222, 1);
      text-stroke:1px rgba(68, 107, 222, 1);
    }
    .chart-content{
      margin-top: 20px;
      height: 654px;
      padding: 20px;
      &.bg{
        background:rgba(225,225,225,.2);
      }
      &.bd{
        border:1px solid rgba(225,225,225,1);
      }
      &.pd0{
        padding: 0;
      }
    }
    .chart-content-title{
      line-height: 65px;
      text-indent: 40px;
      font-size:16px;
      font-weight:bold;
      color: #2F3444;
      background:rgba(240,242,245,.5);
    }
  }
</style>